<template>
  <g class="graphics">
    <circle
      class="circle"
      v-tap.stop="handleTap"
      v-track.stop="handleTrack"
      :r="radius + Math.min(localResizeWidth, localResizeHeight)"
      :cx="offsetX"
      :cy="offsetY"
    ></circle>
  </g>
</template>

<script>
import Vue from "vue";
import GesturePlugin from "@/plugins/gestures";
Vue.use(GesturePlugin);
export default {
  name: 'CircleWidget',
  props: {
    radius: {
      type: Number,
      default: 10
    },
    offsetX: {
      type: Number,
      default: 0
    },
    offsetY: {
      type: Number,
      default: 0
    },
    widgetId: {               // 控件id
      type: Number,
      default: 0
    },
    editing: {                // 是否编辑
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      localResizeWidth: 0,
      localResizeHeight: 0
    };
  },
  methods: {
    handleTap(event) {
      event.detail.widgetId = this.widgetId;
      this.$emit('tap', event)
    },
    handleTrack(event) {
      event.detail.widgetId = this.widgetId;
      this.$emit('track', event)
    }
  }
}
</script>

<style scoped>
.graphics {
  pointer-events: none;
}
.circle {
  fill: #398A39;
  cursor: crosshair;
  pointer-events: fill;
}
</style>